<template>
<div>

<el-card class="box-card">
<div slot="header" class="clearfix">
    <span>创建接口</span>
</div>

<el-form ref="form" :model="form" label-width="180px">

  <el-form-item label="接口名称："  >
    <el-input v-model="form.name" placeholder="请输入接口名称" style="width:300px;"></el-input>
  </el-form-item>

  <el-form-item label="数据库：" >
    <el-select v-model="form.dbname" >
      <el-option 
      v-for="item in dbnameList"
      :label="item.label" :value="item.value"></el-option>
    </el-select>
  </el-form-item>

  <el-form-item label="SQL语句："  >
    <el-input type="textarea" v-model="form.sqlstr"
    style="width:500px;"
    ></el-input>
  </el-form-item>

  <el-form-item label="参数："  >
    <div v-for="(item, index) in form.param" :key="index">
    	<span class="mr10">{{item.value}}</span>
    	<el-radio-group v-model="item.need" size="mini">
	      <el-radio-button :label="true">必填</el-radio-button>
	      <el-radio-button :label="false">可选</el-radio-button>
	    </el-radio-group>
    </div>

    <el-input
	  class="input-new-tag mr10"
	  v-if="inputVisible"
	  v-model="inputValue"
	  ref="saveTagInput"
	  size="small"
	  @keyup.enter.native="handleInputConfirm"
	  @blur="handleInputConfirm"
	>
	</el-input>
    <el-button v-else type="success" size="mini" @click="showInput">添加参数</el-button>

  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="onSubmit()">立即创建</el-button>
  </el-form-item>

</el-form>

</el-card>
</div>
</template>

<script>

import { mapGetters } from 'vuex'

export default {
	
	name : 'createapi',
	
	data () {
		return {
		  	form : {
		  		name : '',
		  		dbname : 'weshop',
		  		param : [
		  			{ value : 'abc', need : true}
		  		],
		  	},

		  	dbnameList : [
		  		{label : 'weshop', value : 'weshop'},
		  	],

		  	inputVisible : false,
		  	inputValue : '',
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {
		...mapGetters([
			
		]),
	},

	methods : {
		onSubmit () {


		},

		showInput() {
	        this.inputVisible = true;
	        this.$nextTick(_ => {
	          this.$refs.saveTagInput.$refs.input.focus();
	        });
	    },

		handleInputConfirm () {

			console.log(this.inputValue);

			let inputValue = this.inputValue;
	        if (inputValue) {
	          	this.form.param.push({
	          		value : inputValue,
	          		need : false,
	          	});
	        }

	        this.inputVisible = false;
	        this.inputValue = '';

		},

	},

	watch : {
	    
	},

	mounted () {
		
	},

}
</script>

<style scoped>
.input-new-tag {
	width: 300px;
}
</style>
